<template>
	<view style="background:#fff;position: relative;height: 100vh">
		<view class="tit">评论</view>
		<view class="propertyReport_base propertyReport_bottom">
			<view class="title_box">
				<view class="exaple">
					<textarea placeholder="请在此输入评论内容,评论内容对所有人可见" v-model="planClockContent" maxlength="200" style="width:100%;"></textarea>
				</view>
				<view class="commentPhotoList" v-if="!parentId">
					<view class="commentPhotoBox" v-for="(item, index) in uploadList" :key="index">
						<view class="commentPhotoDelete" @click="deleteImg(index)"></view>
						<image class="commentPhoto" :src="item" mode="aspectFit"></image>
					</view>
					<view @click="getPhoto" class="commentUpload" v-if="uploadList.length < 9"></view>
				</view>
			</view>
		</view>
		<view class="button_userkeeper_bottom"><button type="primary" class="btn baseBtn" :loading="showLoading" :disabled="disabled" @click="comment()">提交</button></view>
	</view>
</template>

<script>
import http, { uploadImages } from '@/common/request.js';
import bridgeApi from '@/common/rayBridgeSDK.js';
import { getCommonShareInfo } from '@/common/utils.js';

export default {
	data() {
		return {
			disabled: false,
			uploadList: [],
			planClockContent: '', // 评论内容
			activeId: '',
			clockPlanTheme: '',
			parentId: '',
			showLoading: false,
			fileIds: [] // 图片数组id
		};
	},
	onLoad(option) {
		this.activeId = option.activeId;
		this.parentId = option.parentId;
		if (this.parentId) {
			this.disabled = false;
		}
		this.eventChannel = this.getOpenerEventChannel();
	},
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	methods: {
		// 获取图片
		getPhoto(e) {
			// #ifdef H5
			bridgeApi
				.chooseImage({
					count: 9, //默认9
					sourceType: ['album'] //从相册选择
				})
				.then(res => {
					const files = [];
					for (let item of res) {
						files.push('data:image/png;base64,' + item.url);
					}

					this.uploadImages(files.slice(0, 9 - this.uploadList.length));
				});
			// #endif

			// #ifdef MP-WEIXIN
			uni.chooseImage({
				count: 9, //默认9
				sourceType: ['album'], //从相册选择
				success: res => {
					this.uploadImages(res.tempFilePaths.slice(0, 9 - this.uploadList.length));
				}
			});
			// #endif
		},
		uploadImages(files) {
			this.disabled = true;
			this.showLoading = true;
			const list = [];
			for (let item of files) {
				list.push({
					name: 'file',
					uri: item
				});
			}
			uploadImages('/fastdfs/upload/multiUpload', {
				fileList: list
			})
				.then(result => {
					this.uploadList = this.uploadList.concat(files);
					result.forEach(item => {
						const ids = JSON.parse(item).data;
						this.fileIds = this.fileIds.concat(ids);
					});
					this.disabled = false;
					this.showLoading = false;
				})
				.catch(e => {
					// this.disabled = false;
					this.showLoading = false;
					uni.showToast({
						title: '图片处理失败，请重新上传！',
						icon: 'none'
					});
				});
		},

		comment() {
			if (this.parentId == 'undefined') {
				if (!this.uploadList.length && this.planClockContent == '') {
					uni.showToast({
						title: '请填写评论内容',
						icon: 'none'
					});
					return;
				}
			} else {
				if (this.planClockContent == '') {
					uni.showToast({
						title: '请填写评论内容',
						icon: 'none'
					});
					return;
				}
			}
			this.disabled = true;
			http('/api/sysActivityReply/activityReply', {
				data: {
					activityId: this.activeId,
					replyComment: this.planClockContent,
					parentId: this.parentId || 0,
					fileIds: this.fileIds
				},
				method: 'POST'
			}).then(
				result => {
					this.disabled = false;
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					});
					this.eventChannel.emit('queryDetail', true);
					uni.navigateBack({
						delta: 1,
						animationType: 'pop-out',
						animationDuration: 200
					});
				},
				result => {
					this.showLoading = false;
					this.disabled = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		// 删除图片
		deleteImg: function(index) {
			let arr = this.uploadList;
			this.uploadList.splice(index, 1);
			this.fileIds.splice(index, 1);
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.uni-uploader-body {
	margin-top: 0px !important;
}
.uni-body {
	background: #00f;
}
/deep/.card-addCard {
	background: #fff !important;
}
.tit {
	height: 85rpx;
	line-height: 85rpx;
	background: #f7f7f7;
	font-size: 26rpx;
	padding-left: 40rpx;
}
.propertyReport_base {
	padding: 40rpx;
	background: #fff;
	.title_box {
		.exaple {
			font-size: 30rpx;
			color: #66645d;
			margin-bottom: 20rpx;
		}
	}
}
.commentPhotoList {
	display: flex;
	padding-top: 35rpx;
	flex-wrap: wrap;
	position: relative;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2rpx;
		transform: scaleY(0.5);
		background-color: rgba(102, 100, 93, 0.1);
	}
}

.commentPhoto {
	width: 120rpx;
	height: 120rpx;
}

.commentUpload {
	width: 120rpx;
	height: 120rpx;
	background: rgba(102, 100, 93, 0.1);
	color: rgba(216, 216, 216, 1);
	margin: 0 36rpx 36rpx 0;
	position: relative;
	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, 50%);
		width: 50rpx;
		height: 4rpx;
		background-color: #d8d8d8;
		border-radius: 4rpx;
	}
	&::after {
		transform: translate(-50%, 50%) rotate(90deg);
	}
}

.commentPhotoBox {
	position: relative;
	margin: 0 36rpx 36rpx 0;
	border: 1rpx solid #eee;
}

.commentPhotoDelete {
	position: absolute;
	right: -15rpx;
	top: -15rpx;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	width: 30rpx;
	height: 30rpx;
	text-align: center;
	&::before,
	&::after {
		content: '';
		position: absolute;
		width: 4rpx;
		height: 20rpx;
		background-color: #fff;
		top: 50%;
		left: 50%;
		border-radius: 4rpx;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	&::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}
.button_userkeeper_bottom {
	position: fixed;
	width: 100%;
	bottom: 0px;
	.baseBtn {
		height: 82rpx;
		background: #facc6b;
		font-size: 30rpx;
		color: #66645d;
		margin: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
uni-button[disabled] {
	background-color: #f1f1f1 !important;
	color: #ccc !important;
}
.baseBtn[disabled] {
	background-color: #f1f1f1 !important;
	color: #ccc !important;
}
</style>
